import React, { Component } from "react";
import "./index.css";
export default class Footer extends Component {
  state = { target: true };

  render() {
    const { todos } = this.props;
    const length = todos.length;
    let doneNumber = 0;
    todos.forEach((todo) => {
      if (todo.value) {
        doneNumber += 1;
      }
    });
    const result = doneNumber === length && length !== 0 ? true : false;

    return (
      <div className="todo-footer">
        <label>
          <input
            onChange={this.handleChange}
            checked={result}
            type="checkbox"
          />
        </label>
        <span>
          <span>已完成{doneNumber}</span> / 全部{length}
        </span>
        <button onClick={this.clearDone} className="btn btn-danger">
          清除已完成任务
        </button>
      </div>
    );
  }
  clearDone = () => {
    const { saveListType } = this.props;
    const { todos } = this.props;
    const noDoneList = todos.filter((todo) => {
      return todo.value !== true;
    });
    saveListType(noDoneList);
  };
  handleChange = () => {
    const target = !this.state.target;
    const { todos, saveListType } = this.props;
    const DoneList = todos.map((todo) => {
      return { ...todo, value: target };
    });

    saveListType(DoneList);
    this.setState({ target });
  };
}
